<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">搜索结果</h1>
		</header>
		<div class="mui-content" style="background: white;" id="search_data">
			<div class="mui-scroll-wrapper" style="top:44px;touch-action:pan-y ;">
			    <div class="mui-scroll">
			        <ul class="mui-table-view">
			        	<li class="mui-table-view-cell" style="height: 120px;padding: 15px;" v-for="item in movies" @click="open_detail(item)">
			        		<img class="mui-pull-left" :src="item.cover" style="width:60px;height:90px;margin-right: 15px;text-align: center;"  />
			        		<div class="dark-big mui-ellipsis">{{item.title}}</div>
			        		<div>
			        			<span class="gray-medium mui-ellipsis">{{item.genres}}&nbsp;</span>
			        			<span class="orange-medium mui-ellipsis" v-if="item.score>0">{{item.score}}分</span>
			        			<span class="orange-medium mui-ellipsis" v-else>暂无评分</span>
			        		</div>
			        		<div class="gray-medium mui-ellipsis">
			        			导演:{{item.directors}}
			        		</div>
			        		<div class="gray-medium mui-ellipsis">
			        			主演:{{item.casts}}
			        		</div>
			        	</li>
			        </ul>
			    </div>
			</div>
			
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<script type="text/javascript">
			mui.init({
			  pullRefresh: {
			    container:"#search_data",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			    down: {
			      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
			      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
			      height:'50px',//可选,默认50px.下拉刷新控件的高度,
			      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
			      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
			      auto: true,//可选,默认false.首次加载自动上拉刷新一次
			      callback :getData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			    },
			     up: {
			      height:50,//可选.默认50.触发上拉加载拖动距离
			      auto:true,//可选,默认false.自动上拉加载一次
			      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
			      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
			      callback : billLoad//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			    }
			  }
			});
			var serach_value;//搜索的值
			var detailPage;
			mui.plusReady(function(){
				//获取搜索的值
				serach_value = plus.webview.currentWebview().value;//取值
				//预加载
				detailPage = mui.preload({
					id:'movies_detail',
					url:'./movies_detail.html'
				})
			});
			var search_data = new Vue({
				el:"#search_data",
				data:{
					movies:[]
				},
				methods:{
					open_detail:function(item){
						mui.fire(detailPage,'movieId',{
							id:item.id
						});
						detailPage.show('slide-in-right')
					}
				}
			});
			
			
			//滚动事件
			mui('.mui-scroll-wrapper').scroll({
				indicators:false 
			});
			var enablePullUp = true;
			function billLoad() { 
				if (!enablePullUp) {      
					mui('#search_data').pullRefresh().endPullupToRefresh(false); 
					mui.toast("没有更多数据了");        
					return;
				}      
				loadMoreData();    
				mui('#search_data').pullRefresh().endPullupToRefresh(false);
			}

			//请求下一页数据
			function loadMoreData(){
				mui.getJSON('http://api.douban.com/v2/movie/search?q='+serach_value,{
					start:search_data.movies.length,
					count:10
				},function(resp){
					search_data.movies = search_data.movies.concat(convert(resp.subjects));
//					mui('#search_data').pullRefresh().endPullupToRefresh(search_data.movies.length > resp.total);
					enablePullUp = resp.total >= search_data.movies.length;
				})
			}
			//获取数据
			function getData(){
				mui.getJSON('http://api.douban.com/v2/movie/search?q='+serach_value,{
					start:0,
					count:10
				},function(resp){
					search_data.movies = convert(resp.subjects);
					mui('#search_data').pullRefresh().endPulldown();
				})
			}
			//数据转换
			function convert(items){
				var newItems = [];
				items.forEach(function(item){
					var title = item.title;//标题
					var cover = item.images.medium;//图片
					var genres = item.genres.toString().replace(/,/g,' / ');//类型
					var score = item.rating.average;//评分
					var directors = '';
					for(var i = 0;i<item.directors.length;i++){
						directors+=item.directors[i].name;
						if(i!=item.directors.length-1){
							directors+='/';
						}
					}
					var casts = '';
					for(var i = 0;i<item.casts.length;i++){
						casts+=item.casts[i].name;
						if(i!=item.casts.length-1){
							casts+='/';
						}
					}
					newItems.push({
						title:title,
						cover:cover,
						genres:genres,
						score:score,
						directors:directors,
						casts:casts,
						id:item.id
					})
				});
				return newItems;
			}
		</script>
	</body>

</html>